<template>
  <div class="app-container">
    <!--工具条-->
    <el-form :inline="true" :model="filters" size="small">
      <el-form-item label="选择日期">
        <el-date-picker
          v-model="filters.date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="选择老师">
        <el-select v-model="filters.teacherId" placeholder="选择老师" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="toQuery">查询</el-button>
        <el-button type="success" icon="el-icon-download">导出</el-button>
      </el-form-item>
    </el-form>

    <!--列表-->
    <el-table v-loading="loading" :data="data" highlight-current-row style="width: 100%">
      <el-table-column type="index" label="序号 " width="60">
        <template slot-scope="scope">
          <span>{{ scope.$index+(page - 1) * size + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="className" label="班级名称"/>
      <el-table-column prop="classTypeTxt" label="班级类型"/>
      <el-table-column prop="courseName" label="课程名称"/>
      <el-table-column prop="realName" label="老师姓名"/>
      <el-table-column label="开始时间">
        <div slot-scope="scope">
          {{ scope.row.startTime | formatDate('yyyy-MM-dd hh:mm') }}
        </div>
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间">
        <div slot-scope="scope">
          {{ scope.row.endTime | formatDate('yyyy-MM-dd hh:mm') }}
        </div>
      </el-table-column>
      <el-table-column prop="income" label="实际课收（元）"/>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag type="success">已完成</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pg-wrapper">
      <el-pagination
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>
  </div>
</template>

<script>
import initData from '@/mixins/initData'

export default {
  mixins: [initData],
  data() {
    return {
      filters: {
        teacherId: '',
        date: []
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    beforeInit() {
      this.url = 'finance/incomes'
      this.params = {
        teacherId: this.filters.teacherId,
        page: this.page,
        size: this.size
      }
      if (this.filters.date != '' && this.filters.date != null) {
        this.params.date = this.filters.date.join(',')
      }
      return true
    },
    toQuery() {
      this.page = 1
      this.init()
    },
  }
}
</script>
<style lang="css" scoped>
</style>
